<!--
*******************************************************************************
 * Copyright © 2021-2022 VMware, Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License
 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 *
 * @author: Huaqiao Zhang, <huaqiaoz@vmware.com>
 *******************************************************************************
 -->

 <div class="card">
     <div class="card-header">
         <i class="fa fa-plus text-danger mr-2"></i>
         <span>New App Service</span>
     </div>
     <div class="card-header">
        <button class="btn btn-sm btn-success" (click)="save()" [disabled]="!appSvc.name || !appSvc.port"><i class="fa fa-save mr-2"></i>Save</button>
     </div>
     <div class="card-body">
         <form>
            <div class="form-group row has-validation">
                <label class="col-sm-2 col-form-label">
                    <span class="mr-2">App Service Key</span>
                    <span class="fa fa-question-circle-o fa-lg" role="button" data-html="false" data-animation="true"  data-trigger="focus" data-toggle="popover" title="tips" 
                        data-content="App Service Key indicates the name of app service which is also the name on register center."></span>
                </label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" [class.is-invalid]="!appSvc.name"  [class.is-valid]="appSvc.name"  name="appSvcKey" [(ngModel)]="appSvc.name">
                    <div id="appSvcKeyFeedback" class="invalid-feedback">
                        <small>the app service key can't be empty!</small> 
                    </div>
                </div>
            </div>
            <div class="form-group row has-validation">
                <label class="col-sm-2 col-form-label">App Service Port</label>
                <div class="col-sm-10">
                      <input type="text" class="form-control" [class.is-invalid]="!appSvc.port" [class.is-valid]="appSvc.port"  name="appSvcPort" [(ngModel)]="appSvc.port">
                      <div id="appSvcPortFeedback" class="invalid-feedback">
                        <small>the app service port can't be empty!</small> 
                    </div>
                </div>
            </div>
         </form>
     </div>
 </div>